<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>n8n 自动化工作流：技术推文灵感生成器</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
            flex-shrink: 0;
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        .feature-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        ::selection {
            background: #667eea;
            color: white;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center">
                <div class="mb-6">
                    <i class="fas fa-robot text-6xl opacity-90"></i>
                </div>
                <h1 class="text-5xl font-bold mb-4">技术推文灵感生成器</h1>
                <p class="text-xl opacity-90 mb-8">使用 n8n 自动化工作流，每天从 Dev.to 获取技术文章并生成有趣的推文</p>
                <div class="flex justify-center space-x-6 text-lg">
                    <div class="flex items-center">
                        <i class="fas fa-clock mr-2"></i>
                        <span>每日自动运行</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-magic mr-2"></i>
                        <span>AI 智能生成</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-code mr-2"></i>
                        <span>程序员专属</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-6">
            <div class="prose prose-lg">
                <p class="text-gray-700 leading-relaxed text-lg">
                    这个案例专为程序员设计，结合技术与趣味，适合希望通过自动化分享技术见解、提升社交媒体影响力的开发者。我们将使用 n8n 创建一个自动化工作流：每天从 Dev.to 的 RSS 源获取最新的编程文章标题，使用 OpenAI API 生成一条吸引人的推文灵感，并保存到 Google Sheets 进行记录或审核（可选直接发布到 Twitter/X）。整个工作流简单实用，适合 n8n 新手快速上手，同时为程序员提供技术深度和幽默感。
                </p>
            </div>
        </div>
    </section>

    <!-- Prerequisites -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-6xl mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">
                <i class="fas fa-check-circle feature-icon mr-3"></i>前提条件
            </h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                    <div class="flex items-start">
                        <i class="fas fa-server text-purple-600 text-2xl mr-4 mt-1"></i>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">n8n 环境</h3>
                            <p class="text-gray-600">已安装 n8n（推荐 n8n Cloud 或 Docker 自托管，参考 n8n 安装手册）</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                    <div class="flex items-start">
                        <i class="fab fa-google text-purple-600 text-2xl mr-4 mt-1"></i>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">Google 账户</h3>
                            <p class="text-gray-600">用于创建 Google Sheet 并配置 Sheets API（需 OAuth 2.0 凭据）</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                    <div class="flex items-start">
                        <i class="fas fa-brain text-purple-600 text-2xl mr-4 mt-1"></i>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">OpenAI 账户</h3>
                            <p class="text-gray-600">用于获取 API 密钥（https://platform.openai.com）</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover">
                    <div class="flex items-start">
                        <i class="fab fa-twitter text-purple-600 text-2xl mr-4 mt-1"></i>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">Twitter/X 开发者账户（可选）</h3>
                            <p class="text-gray-600">用于直接发布推文（需 API 密钥和 OAuth 凭据）</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
                <p class="text-gray-700">
                    <strong>注意：</strong>本案例优先使用 Google Sheets 保存推文，适合新手快速测试。如果想发布到 Twitter/X，需要额外配置 API，稍后会提供可选步骤。
                </p>
            </div>
        </div>
    </section>

    <!-- Goals -->
    <section class="py-16 bg-white">
        <div class="max-w-6xl mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">
                <i class="fas fa-bullseye feature-icon mr-3"></i>案例目标
            </h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-clock text-purple-600 text-3xl"></i>
                    </div>
                    <h3 class="font-semibold text-xl mb-2">定时触发</h3>
                    <p class="text-gray-600">每天早上 8 点自动运行</p>
                </div>
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-cogs text-purple-600 text-3xl"></i>
                    </div>
                    <h3 class="font-semibold text-xl mb-2">自动化流程</h3>
                    <p class="text-gray-600">获取文章 → AI生成推文 → 保存记录 → 可选发布</p>
                </div>
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-laugh text-purple-600 text-3xl"></i>
                    </div>
                    <h3 class="font-semibold text-xl mb-2">趣味性</h3>
                    <p class="text-gray-600">包含程序员梗和表情，增加互动性</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Diagram -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-6xl mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">
                <i class="fas fa-project-diagram feature-icon mr-3"></i>工作流程图
            </h2>
            <div class="bg-white p-8 rounded-lg shadow-lg">
                <div class="mermaid">
                    graph LR
                        A[<i class='fas fa-clock'></i> 定时触发<br/>每天 8:00] --> B[<i class='fas fa-rss'></i> RSS Read<br/>获取 Dev.to 文章]
                        B --> C[<i class='fas fa-brain'></i> OpenAI<br/>生成推文]
                        C --> D[<i class='fas fa-edit'></i> Set<br/>格式化数据]
                        D --> E[<i class='fab fa-google'></i> Google Sheets<br/>保存记录]
                        D --> F[<i class='fab fa-twitter'></i> Twitter/X<br/>发布推文<br/><em>可选</em>]
                        
                        style A fill:#f9f,stroke:#333,stroke-width:2px
                        style B fill:#bbf,stroke:#333,stroke-width:2px
                        style C fill:#fbf,stroke:#333,stroke-width:2px
                        style D fill:#bfb,stroke:#333,stroke-width:2px
                        style E fill:#ffb,stroke:#333,stroke-width:2px
                        style F fill:#fbb,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5
                </div>
            </div>
        </div>
    </section>

    <!-- Step by Step Guide -->
    <section class="py-16 bg-white">
        <div class="max-w-4xl mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">
                <i class="fas fa-list-ol feature-icon mr-3"></i>步骤指南
            </h2>
            
            <!-- Step 1 -->
            <div class="mb-12">
                <div class="flex items-start mb-4">
                    <div class="step-number">1</div>
                    <h3 class="text-2xl font-semibold ml-4">创建新工作流</h3>
                </div>
                <div class="ml-14 space-y-4">
                    <p class="text-gray-700">登录 n8n（n8n Cloud 或本地 <code class="bg-gray-100 px-2 py-1 rounded">http://localhost:5678</code>），点击"+ New Workflow"创建新工作流，命名为"技术推文灵感生成器"。</p>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753776840905-853206a7-b6ed-422c-b5a2-cedbd31f7d41.png" alt="创建新工作流" class="w-full rounded shadow-md">
                    </div>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="mb-12">
                <div class="flex items-start mb-4">
                    <div class="step-number">2</div>
                    <h3 class="text-2xl font-semibold ml-4">添加定时触发节点</h3>
                </div>
                <div class="ml-14 space-y-4">
                    <p class="text-gray-700">点击画布上的"+"按钮，搜索并添加 Schedule Trigger 节点。配置为每天早上 8 点触发：</p>
                    <ul class="list-disc list-inside text-gray-700 space-y-2">
                        <li><strong>Mode：</strong>选择"Every Day"</li>
                        <li><strong>Hour：</strong>设置为"8"（早上 8 点）</li>
                        <li><strong>Minute